import { Button } from '../components/Button';
import { ImageWithLoading } from '../components/ImageWithLoading';
import { Star, ArrowRight, Award, TrendingUp, Shield } from 'lucide-react';
import { usePageTitle, PAGE_TITLES } from '../lib/usePageTitle';

export function TopPicksPage() {
  usePageTitle(PAGE_TITLES.TOP_PICKS);
  const topPicks = [
    {
      id: 1,
      name: "TheraGun Pro",
      category: "Massage Guns",
      price: 399,
      originalPrice: 499,
      rating: 5.0,
      reviews: 1250,
      image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Editor's Choice",
      slug: "theragun-pro",
      pros: ["Professional-grade power", "Quiet operation", "Long battery life"],
      description: "The gold standard in percussion therapy devices with professional-grade power and whisper-quiet operation that delivers deep tissue treatment."
    },
    {
      id: 2,
      name: "Oura Ring Gen 3",
      category: "Sleep Technology", 
      price: 299,
      originalPrice: null,
      rating: 4.8,
      reviews: 890,
      image: "https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Best Value",
      slug: "oura-ring-gen-3",
      pros: ["Accurate sleep tracking", "Stylish design", "Great app integration"],
      description: "The most comprehensive sleep and recovery tracker in a ring form factor, providing detailed insights into your sleep quality, heart rate variability, and recovery metrics."
    },
    {
      id: 3,
      name: "Jarvis Standing Desk",
      category: "Standing Desks",
      price: 549,
      originalPrice: 699,
      rating: 4.6,
      reviews: 567,
      image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Most Popular",
      slug: "jarvis-standing-desk",
      pros: ["Smooth adjustment", "Sturdy construction", "Great warranty"],
      description: "The perfect balance of quality, features, and affordability with smooth height adjustment, sturdy construction, and exceptional stability for all-day comfort."
    },
    {
      id: 4,
      name: "Bowflex SelectTech 552",
      category: "Home Gym",
      price: 399,
      originalPrice: 499,
      rating: 4.7,
      reviews: 2100,
      image: "https://images.unsplash.com/photo-1571902943202-507ec2618e8f?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Space Saver",
      slug: "bowflex-selecttech-552",
      pros: ["Adjustable weight", "Space efficient", "Durable construction"],
      description: "Replace 15 sets of weights with one smart design that adjusts from 5 to 52.5 pounds, saving space while providing complete workout versatility."
    },
    {
      id: 5,
      name: "Hyperice Hypervolt 2",
      category: "Massage Guns",
      price: 249,
      originalPrice: 299,
      rating: 4.5,
      reviews: 843,
      image: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Budget Pick",
      slug: "hyperice-hypervolt-2",
      pros: ["Lightweight", "Quiet operation", "Good battery life"],
      description: "Professional recovery without the premium price tag, featuring lightweight design, quiet operation, and excellent battery life for effective muscle therapy."
    },
    {
      id: 6,
      name: "UPLIFT V2 Desk",
      category: "Standing Desks",
      price: 699,
      originalPrice: 899,
      rating: 4.9,
      reviews: 1567,
      image: "https://images.unsplash.com/photo-1586953208448-b95a79798f07?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80",
      badge: "Premium Choice",
      slug: "uplift-v2-desk",
      pros: ["Superior build quality", "Advanced features", "Excellent stability"],
      description: "The ultimate standing desk for serious professionals with superior build quality, advanced height memory presets, and rock-solid stability at any height."
    }
  ];

  const getBadgeColor = (badge: string) => {
    switch (badge) {
      case "Editor's Choice":
        return "bg-[#06d6a0] text-[#0a2540]";
      case "Best Value":
        return "bg-[#f8961e] text-white";
      case "Most Popular":
        return "bg-[#f72585] text-white";
      case "Space Saver":
        return "bg-[#4361ee] text-white";
      case "Budget Pick":
        return "bg-[#43aa8b] text-white";
      case "Premium Choice":
        return "bg-[#9b59b6] text-white";
      default:
        return "bg-gray-500 text-white";
    }
  };

  return (
    <div className="w-full bg-[#0a2540] text-white min-h-screen">
      {/* Hero Section */}
      <section className="relative w-full h-[50vh] flex items-center">
        <div className="absolute inset-0 z-0">
          <div className="absolute inset-0 bg-gradient-to-b from-[#0a2540] via-transparent to-[#0a2540] opacity-90 z-10"></div>
          <ImageWithLoading 
            src="https://images.unsplash.com/photo-1559523161-0fc0d8b38a7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=2000&q=80" 
            alt="Award-winning health and wellness products" 
            className="w-full h-full" 
          />
        </div>
        <div className="container mx-auto px-4 md:px-8 relative z-10">
          <div className="max-w-4xl text-center mx-auto">
            <div className="flex justify-center mb-6">
              <Award className="text-[#06d6a0]" size={64} />
            </div>
            <h1 className="text-4xl md:text-6xl font-extrabold mb-6">
              TOP <span className="text-[#06d6a0]">PICKS</span>
            </h1>
            <p className="text-xl md:text-2xl text-gray-200 max-w-3xl mx-auto mb-8">
              Our expertly curated selection of the best health and wellness products. 
              Each pick has been rigorously tested and proven to deliver exceptional results.
            </p>
            <div className="flex flex-wrap justify-center gap-8 text-sm">
              <div className="flex items-center">
                <Shield className="text-[#06d6a0] mr-2" size={20} />
                <span>Expert Tested</span>
              </div>
              <div className="flex items-center">
                <TrendingUp className="text-[#06d6a0] mr-2" size={20} />
                <span>Top Rated</span>
              </div>
              <div className="flex items-center">
                <Award className="text-[#06d6a0] mr-2" size={20} />
                <span>Award Winners</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Top Picks Grid */}
      <section className="py-20 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {topPicks.map((product) => (
              <div key={product.id} className="bg-[#0a2540] rounded-lg overflow-hidden hover:transform hover:scale-105 transition-all duration-300 group">
                <div className="relative">
                  <ImageWithLoading 
                    src={product.image}
                    alt={product.name}
                    className="w-full h-64 object-cover"
                  />
                  <div className={`absolute top-4 left-4 px-3 py-1 rounded-full text-sm font-bold ${getBadgeColor(product.badge)}`}>
                    {product.badge}
                  </div>
                  {product.originalPrice && (
                    <div className="absolute top-4 right-4 bg-[#f72585] text-white px-3 py-1 rounded-full text-sm font-bold">
                      Save ${product.originalPrice - product.price}
                    </div>
                  )}
                </div>
                <div className="p-6">
                  <div className="text-sm text-[#06d6a0] font-medium mb-2">
                    {product.category}
                  </div>
                  <h3 className="text-xl font-bold mb-3 group-hover:text-[#06d6a0] transition-colors">
                    {product.name}
                  </h3>
                  <div className="relative group/description mb-4">
                    <p className="text-gray-300 line-clamp-2">
                      {product.description}
                    </p>
                    {product.description.length > 60 && (
                      <div className="absolute bottom-full left-0 mb-2 px-3 py-2 bg-[#061a2c] border border-[#1a3a5c] rounded-lg shadow-xl opacity-0 invisible group-hover/description:opacity-100 group-hover/description:visible transition-all duration-200 z-10 max-w-xs">
                        <p className="text-sm text-white">{product.description}</p>
                        <div className="absolute top-full left-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-[#061a2c]"></div>
                      </div>
                    )}
                  </div>
                  <div className="flex items-center mb-4">
                    <div className="flex text-[#f8961e]">
                      {[...Array(5)].map((_, i) => (
                        <Star 
                          key={i} 
                          size={16} 
                          fill={i < Math.floor(product.rating) ? "#f8961e" : "none"}
                          stroke={i < Math.floor(product.rating) ? "#f8961e" : "#6b7280"}
                        />
                      ))}
                    </div>
                    <span className="ml-2 text-sm font-medium">{product.rating}</span>
                    <span className="ml-2 text-sm text-gray-400">({product.reviews} reviews)</span>
                  </div>
                  <div className="mb-4">
                    <div className="flex items-center gap-2 mb-2">
                      <span className="text-2xl font-bold text-[#06d6a0]">${product.price}</span>
                      {product.originalPrice && (
                        <span className="text-lg text-gray-400 line-through">${product.originalPrice}</span>
                      )}
                    </div>
                  </div>
                  <div className="mb-4">
                    <h4 className="font-semibold mb-2">Key Benefits:</h4>
                    <ul className="text-sm text-gray-300 space-y-1">
                      {product.pros.map((pro, index) => (
                        <li key={index} className="flex items-center">
                          <div className="w-1.5 h-1.5 bg-[#06d6a0] rounded-full mr-2"></div>
                          {pro}
                        </li>
                      ))}
                    </ul>
                  </div>
                  <Button href={`/reviews/${product.slug}`} className="w-full">
                    Read Full Review <ArrowRight className="ml-2" size={16} />
                  </Button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Why These Picks Section */}
      <section className="py-20 px-4 md:px-8">
        <div className="container mx-auto">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12">
            Why These <span className="text-[#06d6a0]">Products</span>?
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#061a2c] mb-6">
                <Shield className="text-[#06d6a0]" size={32} />
              </div>
              <h3 className="text-xl font-bold mb-4">Rigorous Testing</h3>
              <p className="text-gray-300">
                Each product undergoes months of real-world testing by our expert team to ensure it meets our high standards.
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#061a2c] mb-6">
                <TrendingUp className="text-[#06d6a0]" size={32} />
              </div>
              <h3 className="text-xl font-bold mb-4">Proven Results</h3>
              <p className="text-gray-300">
                Only products that deliver measurable improvements in health, wellness, or productivity make our list.
              </p>
            </div>
            <div className="text-center">
              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#061a2c] mb-6">
                <Award className="text-[#06d6a0]" size={32} />
              </div>
              <h3 className="text-xl font-bold mb-4">Value & Quality</h3>
              <p className="text-gray-300">
                We consider price, durability, features, and performance to recommend products that offer the best overall value.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-16 px-4 md:px-8 bg-[#061a2c]">
        <div className="container mx-auto text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Ready to Optimize Your Health?
          </h2>
          <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto">
            Explore our complete collection of reviews and guides to find the perfect products for your wellness journey.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button size="lg" href="/reviews">
              Browse All Reviews <ArrowRight className="ml-2" size={20} />
            </Button>
            <Button size="lg" variant="secondary" href="/guides">
              Read Our Guides <ArrowRight className="ml-2" size={20} />
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
